<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="../static/CSS/index.css" type="text/css" rel="stylesheet">
	<title>UWP</title>
	<basetarget="_parent" />
	<!-- bootstrap -->
	<link href="../static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
	<!-- 引入jqury,bootsrapt都依赖jqury，必须放在前面 -->
	<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
	<!-- 引入cookie -->
	<script type="text/javascript" src="../static/js/jquery.cookie.js"></script>
	<!-- 引入js -->
	<script type="text/javascript" src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<!-- 引入form -->
	<script type="text/javascript" src="../static/js/jquery.form.min.js"></script>

</head>

<body>

	<iframe class="header" src="header.html"></iframe>
	<div class="container-fluid ">
		<div class="row" style="height: 280px;">
			<!-- LMP图标 -->
			<div class="col-md-4 col-md-offset-3" style="width:100%;
				height:280px; 
				top:50px;
				background:url('../static/images/login_bg.png') no-repeat;
				background-size: 30% 50%;
				">

			</div>
			<!-- 企鹅 -->
			<div class="col-md-4 col-md-offset-7" style="height:280px;	
							top:-280px;						
							background:url('../static/images/index_bg.jpg') no-repeat;
							background-position:50% ;
							background-size:60% 100%;">

			</div>
		</div>
		<!-- 复选框表单 -->
		<div class="row" style="margin-top:-480px;">
			<div class="col-md-7 col-md-offset-3 main">
				<div class="form-group">
					<label class="checkbox-inline">
						<input type="checkbox" id="Cb_cpu" value="cpuutilize"> cpuutilize
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Cb_irq" value="irq"> irq
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Cb_pic" value="picknext"> picknext
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Cb_task" value="taskswitch"> taskswitch
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Cb_hard" value="harddiskreadwritetime"> harddiskreadwritetime
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" id="Cb_memusage" value="memusage"> memusage
					</label>
					<label type="label" id="Cb_collect"> collecttime</label>
					<!-- 输入框,监听CheckBox，未选择不可用 -->
					<input type="text" id="input_collect" placeholder="提取时间" size="10px">
					<div class="row" style="top:10px">
						<div class="col-md-3 col-md-offset-6">
							<button type="button" id="btn_submmit" class="btn btn-default">Submmit</button>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<iframe class="footer" src="footer.html"></iframe>

	<script type="text/javascript">

		//如果未登录，不允许打开index自动转到login
		var token="";
		function checkToken() {
			token = $.cookie("token");
			if (token == "" || token == undefined) {
				window.location.replace("login.html");
			}
		}
		checkToken();
		//提交
		var url = 'http://121.41.228.3:8080';
		$("#btn_submmit").click(function () {
			//输入框判空
			var in_collect = $("#input_collect").val();
			if (in_collect == null || in_collect == "") {
				alert("Please enter collecttime");
			} else {

				//type选择器 : $(":checkbox")
				//默认只提交一个
				var value = "";
				$(":checkbox").each(function () {
					if ($(this).is(":checked")) {
						value = $(this).val();
					}
				});
				// 从cookies里面取token
				token = "Bearer " + token;
				var time = parseInt($("#input_collect").val());
				// '{"":""}'			 
				data = '{"' + value + '":' + true + '}';
				console.log(data);
				data = JSON.parse(data);
				//遍历复选框，选中的值提交ajax
				$.ajax({
					url: url + "/data/collect",
					type: "post",
					beforeSend: function (request) {
						request.setRequestHeader("Authorization", token);
					},
					contentType: "application/json",
					data: JSON.stringify({ data, "collecttime": time }),
					//data:JSON.stringify({(""+value):true ,"collecttime:"+time}),				
					success: function (result) {
						//访问成功就跳转
						var msg = result.msg;
						if (result.code == 200) {
							//操作 跳转
							//window.location.replace("");
						} else {
							alert(msg);
						}
					}
				});
			}
		});
	</script>
</body>

</html>
